<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  
  <title>hexo搭建个人博客 | 赵辅金的博客</title>
  <meta name="author" content="赵辅金">
  
  <meta name="description" content="学习总结 思考感悟 知识管理">
  
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <meta property="og:title" content="hexo搭建个人博客"/>
  <meta property="og:site_name" content="赵辅金的博客"/>

  
    <meta property="og:image" content=""/>
  

  <link href="/bigmagicblog/favicon.png" rel="icon">
  <link rel="alternate" href="/bigmagicblog/atom.xml" title="赵辅金的博客" type="application/atom+xml">
  <link rel="stylesheet" href="/bigmagicblog/css/style.css" media="screen" type="text/css">
  <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  

</head>


<body>
  <header id="header" class="inner"><div class="alignleft">
  <h1><a href="/bigmagicblog/">赵辅金的博客</a></h1>
  <h2><a href="/bigmagicblog/"></a></h2>
</div>
<nav id="main-nav" class="alignright">
  <ul>
    
      <li><a href="/bigmagicblog//">首页</a></li>
    
      <li><a href="/bigmagicblog//archives">归档</a></li>
    
      <li><a href="/bigmagicblog//about">关于</a></li>
    
  </ul>
  <div class="clearfix"></div>
</nav>
<div class="clearfix"></div>
</header>
  <div id="content" class="inner">
    <div id="main-col" class="alignleft"><div id="wrapper"><article class="post">
  
  <div class="post-content">
    <header>
      
        <div class="icon"></div>
        <time datetime="2018-04-07T05:10:22.000Z"><a href="/bigmagicblog/2018/04/07/hexo搭建个人博客/">2018-04-07</a></time>
      
      
  
    <h1 class="title">hexo搭建个人博客</h1>
  

    </header>
    <div class="entry">
      
        <p><img src="http://5477fb98.wiz03.com/share/resources/4858d6a4-f88f-46fa-a996-2b0e54b8a5e5/index_files/a18a88059c1cc5801a99aa4054e0a4ef.jpg" alt="路"></p>
<h2 id="1-简述"><a href="#1-简述" class="headerlink" title="1.简述"></a>1.简述</h2><p>以前写东西都在为知笔记上，坚持了三年了，以后还会坚持写下去。写文章是我的一个爱好，不管写的好不好，文章的论点是否正确，我都一一记录下来。不在于对错，只在于当时的想法。虽然文章写在云笔记上，但不好分享技术与心得。所以想自建一个免费的博客，平时写写文章，写写心得体会，写写感想等等，放飞自我，畅所欲言。</p>
<h2 id="2-hexo是什么"><a href="#2-hexo是什么" class="headerlink" title="2.hexo是什么"></a>2.hexo是什么</h2><p>hexo是一个快速, 简洁且高效的博客框架. 让上百个页面在几秒内瞬间完成渲染. <code>Hexo</code>支持<code>Github Flavored Markdown</code>的所有功能, 甚至可以整合<code>Octopress</code>的大多数插件. 并自己也拥有强大的插件系统.</p>
<p><a href="https://hexo.io/zh-cn/" target="_blank" rel="noopener">hexo的中文官方网站</a></p>
<h2 id="3-安装hexo"><a href="#3-安装hexo" class="headerlink" title="3.安装hexo"></a>3.安装hexo</h2><p>安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Node.js</span><br><span class="line">Git</span><br></pre></td></tr></table></figure>
<p><a href="http://nodejs.cn/" target="_blank" rel="noopener">下载node.js</a></p>
<p>Git下载可以从国外的网站进行下载，但是比较慢</p>
<p><a href="https://git-scm.com/download/win" target="_blank" rel="noopener">Git官网</a></p>
<p>也可以通过国内的镜像进行下载</p>
<p><a href="https://github.com/waylau/git-for-win" target="_blank" rel="noopener">Git国内镜像下载</a></p>
<p>如果您的电脑中已经安装上述必备程序，那么恭喜您！接下来只需要使用 npm 即可完成 Hexo 的安装。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></figure>
<p><img src="http://5477fb98.wiz03.com/share/resources/b7fb351f-662e-483d-a734-814e8e97bd25/index_files/15745882.png" alt="安装hexo"></p>
<h2 id="4-hexo使用"><a href="#4-hexo使用" class="headerlink" title="4. hexo使用"></a>4. hexo使用</h2><h3 id="4-1-建立本地的博客系统"><a href="#4-1-建立本地的博客系统" class="headerlink" title="4.1 建立本地的博客系统"></a>4.1 建立本地的博客系统</h3><p>首先选择一个要放置博客文件的文件夹，在文件夹中输入<code>hexo init</code>。这就是博客的仓库。是不是和<code>git init</code>有点类似呢？实际上hexo也是创建一个仓库。</p>
<p><img src="http://5477fb98.wiz03.com/share/resources/b7fb351f-662e-483d-a734-814e8e97bd25/index_files/15952412.png" alt="图像仓库"></p>
<p>在仓库中生成了如下的目录结构</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">.</span><br><span class="line">├── _config.yml</span><br><span class="line">├── package.json</span><br><span class="line">├── scaffolds</span><br><span class="line">├── source</span><br><span class="line">|   ├── _drafts</span><br><span class="line">|   └── _posts</span><br><span class="line">└── themes</span><br></pre></td></tr></table></figure>
<p>其中关注的比较多的是<strong>_config.yml</strong>文件</p>
<p>该文件是网站的配置信息，大部分的配置与这个地方有关。</p>
<p>接下来是<strong>themes</strong>文件夹</p>
<p>该文件夹下可以自定义或者下载一些主题。</p>
<p>刚下载的代码直接部署到本地就可以看到效果了</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo g #部署</span><br><span class="line">hexo s #发布</span><br></pre></td></tr></table></figure>
<p>访问本地的ip地址即可访问博客</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">http://localhost:4000/bigmagicblog/</span><br></pre></td></tr></table></figure>
<p><img src="http://5477fb98.wiz03.com/share/resources/64e8bb2f-68a2-42ec-958c-dd772edcecd4/index_files/4574495.png" alt="本地部署"></p>
<h3 id="4-2-搭建远程博客"><a href="#4-2-搭建远程博客" class="headerlink" title="4.2 搭建远程博客"></a>4.2 搭建远程博客</h3><p>如果想将自己的写的东西分享到因特网上，比较简单的方式就是部署到github或者码云上。因为国内上github还是相对较慢，所以这里采用的是码云。</p>
<p>首先创建一个项目</p>
<p><img src="http://5477fb98.wiz03.com/share/resources/8ea33b08-2d49-4ab0-8d7e-5afaaa41193c/index_files/7f8d27e5-b8c2-4be4-a2b1-be1eca9f118e.png" alt="创建项目"></p>
<p>首先安装部署系统</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure>
<p>然后修改<strong>_config.yml</strong>文件</p>
<p>在最后一行添加自己在码云上的项目的地址</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"># Deployment</span><br><span class="line">## Docs: https://hexo.io/docs/deployment.html</span><br><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repo: git@gitee.com:xxx/xxx.git</span><br></pre></td></tr></table></figure>
<p>如果要在码云</p>
<p>之后一键部署即可</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo g //生成静态页面</span><br><span class="line">hexo d //部署到码云</span><br></pre></td></tr></table></figure>
<p>此时还需要在码云上开启免费的域名</p>
<p><img src="http://5477fb98.wiz03.com/share/resources/8ea33b08-2d49-4ab0-8d7e-5afaaa41193c/index_files/0fb5b15e-68f8-4e95-90dc-70ad38364ab8.jpg" alt="使用域名"></p>
<p>最后部署即可</p>
<p><img src="http://5477fb98.wiz03.com/share/resources/8ea33b08-2d49-4ab0-8d7e-5afaaa41193c/index_files/122f756b-096d-480f-9b58-30c2be8bcd9e.png" alt="部署"></p>
<p>访问图片上的地址即可进行博客的预览。</p>
<h2 id="5-主题更改"><a href="#5-主题更改" class="headerlink" title="5.主题更改"></a>5.主题更改</h2><p>关于主题，有很多的样式可供选择。个人偏向于简单一点的，所以选择light主题。</p>
<p><img src="http://5477fb98.wiz03.com/share/resources/8ea33b08-2d49-4ab0-8d7e-5afaaa41193c/index_files/976ace39-92f5-4b8f-af38-7ebf2163f7df.jpg" alt="light"></p>
<p>首先下载主题</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone git@github.com:hexojs/hexo-theme-light.git</span><br></pre></td></tr></table></figure>
<p>下载到themes目录中</p>
<p><img src="http://5477fb98.wiz03.com/share/resources/8ea33b08-2d49-4ab0-8d7e-5afaaa41193c/index_files/13484008.png" alt="light主题"></p>
<p>进入light文件夹，进行个性化的定制</p>
<p>只需要修改该目录下的<code>_config.yml</code>文件即可</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">menu:</span><br><span class="line">  首页: /</span><br><span class="line">  归档: /archives</span><br><span class="line">  关于: /about</span><br><span class="line"></span><br><span class="line">widgets:</span><br><span class="line">- search</span><br><span class="line">- category</span><br><span class="line">- tag</span><br><span class="line"></span><br><span class="line">excerpt_link: 阅读全文</span><br></pre></td></tr></table></figure>
<p>然后改变顶层目录上的<code>_config.yml</code>文件</p>
<p>将主题换成light主题即可</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"># Extensions</span><br><span class="line">## Plugins: https://hexo.io/plugins/</span><br><span class="line">## Themes: https://hexo.io/themes/</span><br><span class="line">#theme: landscape</span><br><span class="line">theme: light</span><br></pre></td></tr></table></figure>
<h2 id="6-博客的编写与发布"><a href="#6-博客的编写与发布" class="headerlink" title="6. 博客的编写与发布"></a>6. 博客的编写与发布</h2><p>在hexo上写博客的步骤首先是在本地编写Makedown文档，然后放到source/_posts文件夹中</p>
<p><img src="http://5477fb98.wiz03.com/share/resources/8ea33b08-2d49-4ab0-8d7e-5afaaa41193c/index_files/13844948.png" alt="图像地址"></p>
<p>需要注意的是，每篇文章前面要携带一些标签信息</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: hexo搭建个人博客</span><br><span class="line">date: 2018-04-7 13:10:22</span><br><span class="line">tags: 效率</span><br><span class="line">categories: 格物致知</span><br><span class="line">---</span><br></pre></td></tr></table></figure>
<p>最后转移到上述文件夹中</p>
<p>然后输入</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo g //生成静态页面</span><br><span class="line">hexo d //部署到码云</span><br></pre></td></tr></table></figure>
<p>访问自己的博客地址就可以看到效果了。</p>
<p>关于图片问题，如果将图片放在目录中，用相对路径去访问，将看不到图像。对于这个问题，我查过一些资料，可以采用图床的方式，将图片上传至一个服务器，然后生成地址。</p>
<p>而我自己采用的方式是利用为知笔记，由于为知笔记每个月有10G的空间，将图片上传后分享到远程链接，直接贴在图像上即可。</p>
<h2 id="7-小结"><a href="#7-小结" class="headerlink" title="7.小结"></a>7.小结</h2><p>博客是一个很好的平台，需要每天坚持写才有效果。所以多总结，多探究，多思考，才能有文章可写。并且对于排版有了更加严格的要求，需要提高自己的文章的排版与设计能力。</p>

      
    </div>
    <footer>
      
        
  
  <div class="categories">
    <a href="/bigmagicblog/categories/格物致知/">格物致知</a>
  </div>

        
  
  <div class="tags">
    <a href="/bigmagicblog/tags/效率/">效率</a>
  </div>

        
  <div class="addthis addthis_toolbox addthis_default_style">
    
      <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
    
    
      <a class="addthis_button_tweet"></a>
    
    
      <a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
    
    
      <a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a>
    
    <a class="addthis_counter addthis_pill_style"></a>
  </div>
  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>

      
      <div class="clearfix"></div>
    </footer>
  </div>
</article>


<section id="comment">
  <h1 class="title">Comments</h1>

  
      <div id="fb-root"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=123456789012345";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

<div class="fb-comments" data-href="http://bigmagic.gitee.io/bigmagic/2018/04/07/hexo搭建个人博客/index.html" data-num-posts="5" data-width="840" data-colorscheme="light"></div>
      
  
</section>

</div></div>
    <aside id="sidebar" class="alignright">
  <div class="search">
  <form action="//google.com/search" method="get" accept-charset="utf-8">
    <input type="search" name="q" results="0" placeholder="Search">
    <input type="hidden" name="q" value="site:bigmagic.gitee.io/bigmagic">
  </form>
</div>

  
<div class="widget tag">
  <h3 class="title">Categories</h3>
  <ul class="entry">
  
    <li><a href="/bigmagicblog/categories/嵌入式/">嵌入式</a><small>1</small></li>
  
    <li><a href="/bigmagicblog/categories/格物致知/">格物致知</a><small>1</small></li>
  
    <li><a href="/bigmagicblog/categories/诗词鉴赏/">诗词鉴赏</a><small>1</small></li>
  
    <li><a href="/bigmagicblog/categories/读书笔记/">读书笔记</a><small>2</small></li>
  
  </ul>
</div>


  
<div class="widget tag">
  <h3 class="title">Tags</h3>
  <ul class="entry">
  
    <li><a href="/bigmagicblog/tags/C语言基础/">C语言基础</a><small>1</small></li>
  
    <li><a href="/bigmagicblog/tags/效率/">效率</a><small>1</small></li>
  
    <li><a href="/bigmagicblog/tags/文学/">文学</a><small>3</small></li>
  
  </ul>
</div>

</aside>
    <div class="clearfix"></div>
  </div>
  <footer id="footer" class="inner"><div class="alignleft">
  
  &copy; 2018 赵辅金
  
</div>
<div class="clearfix"></div></footer>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="/bigmagicblog/js/jquery.imagesloaded.min.js"></script>
<script src="/bigmagicblog/js/gallery.js"></script>




<link rel="stylesheet" href="/bigmagicblog/fancybox/jquery.fancybox.css" media="screen" type="text/css">
<script src="/bigmagicblog/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
  $('.fancybox').fancybox();
})(jQuery);
</script>

</body>
</html>
